<template>
  <TablePage>
    <template #top>
      <SearchForm
        title="收费站管理"
        :show-add-btn="false"
        :keyword-search-data="[{ key: 'tollGateName', label: '收费站名称' }]"
        @search="search"
      />
    </template>
    <SlTable :columns="columns" row-key="id" :data-source="tableData" :pagination="pagination" :loading="tableLoading">
      <template #bodyCell="{ column, record }">
        <div v-if="column.key === 'oper'">
          <a type="primary" @click="showUpdateModal(record)">{{ t("common.edit") }}</a>
        </div>
      </template>
    </SlTable>
    <CURDDialog
      id-key="id"
      :columns="columns"
      update-title="编辑收费站信息"
      :show-options="showOptions"
      :model="model"
      :model-form-setting="modelFormSetting"
      :model-rules="modelRules"
      :table-data="tableData"
      :oper-data="operData"
      :curd="curd"
      :reload-table="reloadTable"
    />
  </TablePage>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { useCURD } from "/@/hooks/useCURD";
import { handleDateRowRender } from "/@/utils/common";
import { FormItemComponentType, CURDAction } from "/@/components/CURDDialog/models";
import type { FormItemData, OperItem, ShowCURDModalOptions } from "/@/components/CURDDialog/models";
import type { TableProps } from "ant-design-vue";
import { PatternKey } from "/@/utils/verify";
import { Api } from "/@/api/main/civilizedService";
import { TollGateItem } from "/@/api/main/civilizedService/models";

const { t } = useI18n();
const columns = ref<TableProps<TollGateItem>["columns"]>([
  {
    title: "收费站名称",
    dataIndex: "tollGateName",
  },
  {
    title: "备注",
    dataIndex: "remarks",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    customRender: handleDateRowRender,
  },
  {
    title: t("common.oper"),
    key: "oper",
    width: 100,
  },
]);
const model = ref<TollGateItem>({
  tollGateName: "",
  remarks: "",
});
const modelRules = ["applicationName", "applicationCode", "applicationUrl"];
const modelFormSetting: FormItemData<TollGateItem>[] = [
  {
    key: "tollGateName",
    max: 32,
    pattern: PatternKey.name,
  },
  {
    label: "备注",
    key: "remarks",
    max: 250,
    type: FormItemComponentType.TEXTAREA,
  },
];

const showOptions = ref<ShowCURDModalOptions>();
// function showCreateModal() {
//   showOptions.value = { action: CURDAction.CREATE };
// }
function search(model) {
  reloadTable({
    model,
  });
}

const { pagination, tableData, tableLoading, curd, reloadTable } = useCURD<TollGateItem>({
  getPageUrl: Api.tollGatesPage,
  updateUrl: Api.tollGatesPage,
});

const operData: OperItem<TollGateItem>[] = [
  {
    label: t("common.edit"),
    handler: showUpdateModal,
  },
];
function showUpdateModal(record) {
  showOptions.value = { action: CURDAction.UPDATE, record };
}
// function deleteRecord(record) {
//   showOptions.value = { action: CURDAction.DELETE, record };
// }
</script>
